<template>
	<view class="wap">
		<view class="head-hight">
			<view class="head">
				<view class="head-top">
					<view class="head-search flex-center">
						<view class="head-region flex-center size">
							<view class="size">重庆</view>
							<view class="head-icon"></view>
						</view>
						<view class="flex-center" style="flex: 1 1 0%;">
							<icon><i role="img" class="icon-search" style="    font-size: 32rpx;;"></i></icon>
							<input class="head-input" maxlength="140" placeholder="请输入内容">
							</input>
						</view>
						<view class="search">搜索</view>
					</view>
				</view>
				<view class="flex-center-center head-title">
					<view class="active">丽人</view>
					<view class="head-text">休闲娱乐</view>
					<view class="head-text">餐饮</view>
					<view class="head-text">教育培训</view>
					<view class="head-text">结婚</view>
					<view class="head-text">亲子</view>
				</view>
				<view class="flex-center-center head-bottom">
					<view class="flex container">
						<view class="flex-center-center item right-border">
							<view>附近</view>
							<text data-v-218f84fe="" class="icons flex-center-icons "
								style="color: rgb(175, 176, 177); font-size: 18px;"></text>
						</view>
						<view class="flex-center-center item right-border">
							<view>全部分类</view>
							<text data-v-218f84fe="" class="icons flex-center-icons "
								style="color: rgb(175, 176, 177); font-size: 18px;"></text>
						</view>
						<view class="flex-center-center item">
							<view>离我最近</view>
							<text data-v-218f84fe="" class="icons flex-center-icons "
								style="color: rgb(175, 176, 177); font-size: 18px;"></text>
						</view>
					</view>
				</view>
				<view class="filter-container">
					<view class="filter-list">
						<view class="filter-item">美发</view>
						<view class="filter-item">美甲</view>
						<view class="filter-item">美容美体</view>
						<view class="filter-item">美睫纹绣</view>
						<view class="filter-item">其他丽人</view>
						<view class="filter-item">纹身</view>
						<view class="filter-item">化妆品</view>
						<view class="filter-item">舞蹈</view>
						<view class="filter-item">瑜伽</view>
						<view class="filter-item">医疗整形</view>
						<view class="filter-item">养发</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="content">
				<view class="content-text flex">
					<view class="content-image">
						<image class="content-logo"
							src="https://p0.meituan.net/dpmerchantpic/8645f86ca3a444862cef2af23091b649364106.jpg%40320w_240h_1e_1c_1l%7Cwatermark%3D0">
						</image>
					</view>
					<view class="content-right">
						<view class="content-name">兰亭荟减脂•全国连锁（大溪沟店）
							<!---->
						</view>
						<view class="content-evaluate flex-center">
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star-half.png">
							</image>
							<image class="content-Star" src="@/static/img/star-no.png">
							</image>
							<view class="content-number">4.2</view>
						</view>
						<view class="content-title">美容美体 大礼堂</view>
						<view class="content-Discount flex-center">
							<view class="content-benefit">惠</view>
							<view class="content-ten overflow-hidden">【肩颈管家】五行肩颈深度调理疏通</view>
						</view>
						<view class="content-bottom flex-left-right">
							<view class="flex-center">
								<view class="content-amount">￥97</view>
								<view class="content-decoration">￥298</view>
							</view>
							<view>
								<view class="content-decoration-amount">领卷省<text class="amount-text">201</text>元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="content-text flex">
					<view class="content-image">
						<image class="content-logo"
							src="https://p0.meituan.net/dpmerchantpic/558676ae827fea5c467f261b023c0060290771.jpg%40320w_240h_1e_1c_1l%7Cwatermark%3D0">
						</image>
					</view>
					<view class="content-right">
						<view class="content-name">兰亭荟减脂•全国连锁（大溪沟店）
							<!---->
						</view>
						<view class="content-evaluate flex-center">
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star.png">
							</image>
							<image class="content-Star" src="@/static/img/star-half.png">
							</image>
							<image class="content-Star" src="@/static/img/star-no.png">
							</image>
							<view class="content-number">4.2</view>
						</view>
						<view class="content-title">美容美体 大礼堂</view>
						<view class="content-Discount flex-center">
							<view class="content-benefit">惠</view>
							<view class="content-ten overflow-hidden">【全新技术】5N科学减脂/20次/瘦10-30斤
							</view>
						</view>
						<view class="content-bottom flex-left-right">
							<view class="flex-center">
								<view class="content-amount">￥597</view>
								<view class="content-decoration">￥2980</view>
							</view>
							<view>
								<view class="content-decoration-amount">领卷省<text class="amount-text">2383</text>元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.amount-text {
		    font-size: 30rpx;;
		font-weight: 700
	}

	.color {
		color: #333
	}

	.colorWhite {
		color: #fff
	}

	.colorhui {
		color: #ababab
	}

	.flex {
		display: flex
	}

	.flex-center {
		display: flex;
		align-items: center
	}

	.flex-left {
		display: flex;
		justify-content: flex-end
	}

	.flex-left-right {
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.flex-padding {
		display: flex;
		justify-content: space-around;
		align-items: center
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center
	}

	.size {
		    font-size: 30rpx;
	}

	.head-hight {
		height: 140px;
		position: relative;
		z-index: 9999
	}

	.head {
		/* height: 320rpx; */
		background-color: #fff;
		position: fixed;
		width: 100%;
			/* background: rgba(0,0,0,0.1); */
	}

	.head-top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 57px;
		background-color: #ff8546
	}

	.head-search {
		background-color: #f8f8f8;
		border-radius: 28px;
		padding: 4px 0px;
		height: 28px;
		width: 331px
	}

	.head-region {
		/* width: 150rpx; */
		margin: 0px 9px;
		padding: 0 9px;
		border-right: 1px solid #ececec
	}

	.head-icon icon {
		font-size: 19px
	}

	.dividing {
		padding: 0px 14px;
		background: red
	}

	.head-input {
		margin-left: 4px;
		flex: 1
	}

	.search {
		background-color: #ff8546;
		padding: 3px 9px;
		border-radius: 28px;
		    font-size: 28rpx;;
		margin: 0px 7px
	}

	.head-title {
		height: 28px;
		justify-content: space-evenly;
		margin: 7px 0
	}

	/* 头部选中后的颜色
 */
	.head-title .active {
		    font-size: 30rpx;;
		border-bottom: 2px solid #ff8546;
		font-weight: 700
	}

	.head-title-fengge {
		border-bottom: 1px solid #e0dcdd
	}

	/* 头部标题 */
	.head-text {
		    font-size: 30rpx;
	}

	.head-text-nth {
		border-left: 1px solid #ececec;
		border-right: 1px solid #ececec;
		padding: 0px 28px
	}

	.iconfont {
		font-size: 19px;
		color: #b1b1b1
	}

	.head-bottom {
		height: 38px;
		    font-size: 30rpx;;
		border-bottom: 1px solid #ececec
	}

	.head-bottom .container {
		height: 28px;
		width: 100%;
		font-size: 12px
	}

	.head-bottom .container .item {
		width: 50%
	}

	.right-border {
		border-right: 1px solid #ececec
	}

	.head-icon-up {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		-webkit-animation: animation_up-data-v-6ef0e666 .2s 1;
		animation: animation_up-data-v-6ef0e666 .2s 1
	}

	.head-icon-down {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-animation: animation_down-data-v-6ef0e666 .2s 1;
		animation: animation_down-data-v-6ef0e666 .2s 1
	}

	@-webkit-keyframes animation_up-data-v-6ef0e666 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		25% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg)
		}

		50% {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg)
		}

		75% {
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg)
		}

		100% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg)
		}
	}

	@keyframes animation_up-data-v-6ef0e666 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		25% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg)
		}

		50% {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg)
		}

		75% {
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg)
		}

		100% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg)
		}
	}

	@-webkit-keyframes animation_down-data-v-6ef0e666 {
		0% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg)
		}

		25% {
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg)
		}

		50% {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg)
		}

		75% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg)
		}

		100% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}
	}

	@keyframes animation_down-data-v-6ef0e666 {
		0% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg)
		}

		25% {
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg)
		}

		50% {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg)
		}

		75% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg)
		}

		100% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}
	}

	/* 弹出框 */
	.filter-container {
		background-color: #fff;
		font-size: 12px
	}

	.filter-list {
		max-height: 230px;
		overflow-y: scroll
	}

	.filter-item {
		height: 18px;
		border-bottom: 1px solid #ececec;
		padding: 9px
	}

	/* 商品列表 */
	.content {
		background-color: #fff;
		margin-bottom: 7px
	}

	.content-text {
		padding: 9px 14px
	}

	.content-logo {
		width: 120px;
		height: 96px;
		border-radius: 9px;
		margin-top: 4px
	}

	.content-right {
		margin-left: 7px;
		flex: 1
	}

	.content-Star {
		width: 14px;
		height: 14px;
		margin-right: 4px
	}

	.content-name {
		font-weight: 700;
		    font-size: 32rpx;
	}

	.content-title {
		margin-top: 4px;
		color: #b1b1b1;
		    font-size: 28rpx;
	}

	.content-number {
		    font-size: 28rpx;;
		color: #fb8007;
		font-weight: 700
	}

	.content-Discount {
		margin-top: 4px
	}

	.content-benefit {
		padding: 0px 4px;
		background: #ff8546;
		color: #fff;
		width: 14px;
		text-align: center;
		border-radius: 3px;
		    font-size: 28rpx;
	}

	.content-ten {
		margin-left: 4px;
		    font-size: 28rpx;
	}

	/* 文本吗超出1行隐藏 */
	.overflow-hidden {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1
			/* 这里设置需要显示几行文本 */
	}

	.content-bottom {
		margin-top: 4px;
		    font-size: 28rpx;
	}

	.content-amount {
		color: #f42f2f;
		font-weight: 700
	}

	.content-decoration {
		text-decoration: line-through;
		margin-left: 4px;
		color: #b1b1b1
	}

	.content-decoration-amount {
		background-color: #ff8546;
		color: #333;
		padding: 4px 9px;
		border-radius: 15px;
		font-size: 24rpx
	}

	.background {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2)
	}
</style>
